.l-switch {
  display: inline-block;
  width: 50px;
  height: 18px;
  padding: 5px;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  .l-switch-inner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
  }
  &.l-switch-on {
    background-color: rgb(52, 81, 248);
    .l-switch-inner { right: 5px; }
  }

  &.l-switch-off {
    background-color: #ddd;
    .l-switch-inner { left: 5px; }
  }

  &.is-disabled {
    cursor: not-allowed;
  }

  // size
}

.l-switch--medium {
  width: 40px;
  height: 16px;
}

.l-switch--small {
  width: 40px;
  height: 14px;
  .l-switch-inner {
    height: 16px;
    width: 16px;
  }
}

.l-switch--mini {
  width: 34px;
  height: 12px;
  .l-switch-inner {
    width: 12px;
    height: 12px;
  }
}